import React, { Component } from 'react';
import AddCounter from './children/AddCounter';
import SubCounter from './children/SubCounter';

class App extends Component {

  constructor(props) {
    super(props);
    this.state = { 
      counter: 100
    }
  }

  changeCounte(counte) {
    console.log(counte);
    console.log(this);
    this.setState({
      counter: this.state.counter + counte
    })
  }

  //用Javascript的思想去写React！而不是用html的思想去写React.
  //太简单啦！~
  //子传父直接传入一个回调函数即可
  render() {
    const {counter} = this.state;
    return ( 
      <div>
        <h2>当前计数:{counter}</h2>
        {/* 传递过去的是方法的地址，在回调时，非严格模式this默认为window, 严格模式this为undefined, 所以要手动绑定this, 或者使用箭头函数 */}
        {/* 无论是传递数据、传递方法、传递组件，本质上都是传递对象，或者说传递内存地址, 和Javascript方法调用是一样的 */}
        {/* 因为组件本质上就是一个element对象, 通过它有参的构造函数添加属性/方法 */}
        <AddCounter addCounte = {this.changeCounte.bind(this)}></AddCounter>
        <SubCounter subCounte = {counte => this.changeCounte(counte)}></SubCounter>
      </div>
     );
  }
}
 
export default App;